<template>
    <!-- #ifdef APP -->
    <scroll-view style="flex:1">
    <!-- #endif -->
        <!-- 状态栏 -->
        <view v-if="height == initHeight" class="status_bar"></view>
        <view>
            <video id="video" ref="videoRef" :style="{height: height + 'px', width: width}" :controls="true" src="http://www.runoob.com/try/demo_source/mov_bbb.mp4"></video>
        </view>
        <button @click="enterPictureInPictureMode">开启画中画模式</button>
    <!-- #ifdef APP -->
    </scroll-view>
    <!-- #endif -->
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { start  } from '@/uni_modules/kux-pip';
    import { StartOptions, StartSuccess } from '@/uni_modules/kux-pip/utssdk/interface';
    import { onReady } from '@dcloudio/uni-app';

    // const videoRef = ref<UniVideoElement | null>(null);

    const initHeight = ref(200);
    const height = ref(initHeight.value);
    const width = ref('100%');

    const videoContext = ref(null);

    onReady(() => {
        videoContext.value = uni.createVideoContext('video');
    })

    function enterPictureInPictureMode() {
        start({
            success(res: StartSuccess) {
                console.log(res, '成功回调');
            },
            fail(res) {
                console.log(res, '失败回调');
            },
            complete(res: any) {
                console.log(res, '完成回调');
            },
            stateChange(res) {
				console.log(res);
                if (res.height < initHeight.value) {
                    height.value = res.height;
                    width.value = `${res.width}px`;
                    videoContext.value!.play();
                } else {
                    height.value = initHeight.value;
                    width.value = '100%';
                }
            }
        } as StartOptions);
    }
</script>

<style>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
        background-color: black;
    }
</style>